<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:include="~{common/header :: commonCss}"></div>
    <link rel="stylesheet" th:href="@{/manager/css/home.css}"/>
</head>
<body>
    <div id="home">
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#example-navbar-collapse">
                    </button>
                    <a class="navbar-brand" href="#" th:text="#{company.system.name}"></a>
                </div>
                <div class="collapse navbar-collapse" id="example-navbar-collapse" style="float: right;">
                    <ul class="nav navbar-nav" style="right: 0;">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" >
                                欢迎~<span th:text="${nickName}"></span>
                                <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a th:href="@{/logout}">退出</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <!--左侧菜单-->
        <div class="panel-group left-menu-wrap" id="accordion">

        </div>

        <!-- 右边展示页 -->
        <div class="col-sm-10 col-sm-offset-2 main">
            <div style="margin-top: -20px;">
                <h4 id="page-header" class="page-header">&nbsp;</h4>
            </div>
            <div id="main-page">

            </div>
        </div>
    </div>
</body>
<div th:include="~{common/footer :: commonJs}"></div>
<script th:src="@{/manager/js/home.js}"></script>
<script th:inline="javascript">
    var basePath = [[@{/}]];

    $(function() {loadMenu(basePath);});

    function loadMenu(url) {
        $.get(url + "getMenus?t=" +  new Date().getTime(), function(data) {
            try {
                data = eval("(" + data + ")");
                if (data["success"]) {
                    var menus = data["data"];
                    var html = "";
                    for (var i = 0; i < menus.length; ++i) {
                        html += "<div class=\"panel panel-default\">";
                        html += "<div class=\"panel-heading\" data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapse" + i + "\">";
                        html += "<h4 class=\"panel-title\"><a>";
                        html += menus[i]["name"] + "</a></h4></div>"

                        var subMenus = menus[i]["subMenus"];
                        if (subMenus && subMenus.length > 0) {
                            html += "<div id=\"collapse" + i + "\" class=\"panel-collapse collapse";
                            if (i == 0) html += " in";
                            html += "\">";
                            for (var j = 0; j < subMenus.length; ++j) {
                                html += "<div class=\"panel-body\"><a href=\"#\" onclick=\"loadPage('"+url + subMenus[j]["link"] +"', '"+ menus[i]["name"] + " / " + subMenus[j]["name"]+"')\">";
                                html += subMenus[j]["name"] + "</a></div>"
                            }
                            html += "</div>";
                        }
                        html += "</div>";
                    }
                    $("#accordion").html(html);
                }
            } catch (e) {

            }
        });
    }

    function loadPage(url, header) {
        $("#page-header").html(header);
        $("#main-page").load(url);
    }
</script>